<!-- original apitest tab content (commented out) -->
<div class="row">
    <!-- 左侧树形菜单 -->
    <div class="col-lg-2" style="padding-right: 0;">
        <div class="card shadow-sm">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h2 class="h6 mb-0"><i class="fa fa-sitemap me-2"></i>接口目录</h2>
                <button id="api-new-endpoint" class="btn btn-sm btn-outline-light"><i class="fa fa-plus"></i> 新增</button>
            </div>
            <div class="card-body">
                <input id="api-tree-search" type="text" class="form-control form-control-sm mb-2" placeholder="搜索接口">
                <div id="apitest-tree" style="max-height:520px; overflow:auto"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-10">
        <!-- 请求配置 -->
        <div class="card shadow-sm">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-2">
                    <input id="api-name" type="text" class="form-control form-control-sm" placeholder="接口名称" style="min-width:220px">
                </div>
                <div class="d-flex align-items-center gap-2" >
                    <select id="api-method" class="form-select form-select-sm" style="width:auto">
                        <option>GET</option>
                        <option>POST</option>
                        <option>PUT</option>
                        <option>DELETE</option>
                        <option>OPTIONS</option>
                        <option>HEAD</option>
                        <option>PATCH</option>
                        <option>TRACE</option>
                    </select>
                    <input id="api-url" type="text" class="form-control form-control-sm"
                        placeholder="输入请求URL，例如 https://httpbin.org/get" style="min-width:420px">
                    <div class="form-check form-switch ms-2" style="min-width: 120px;">
                        <input class="form-check-input" type="checkbox" id="api-with-credentials">
                        <label class="form-check-label " for="api-with-credentials">携带凭据</label>
                    </div>
                    <button id="api-send" class="btn btn-sm btn-outline-primary" style="min-width: 60px;"><i class="fa fa-paper-plane"></i>发送</button>
                    <button id="api-save-def" class="btn btn-sm btn-outline-success"  style="min-width: 60px;"><i class="fa fa-save"></i>保存</button>
                </div>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs" id="api-config-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="api-params-tab" data-bs-toggle="tab" data-bs-target="#api-params" type="button" role="tab" aria-controls="api-params" aria-selected="true">Params</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="api-body-tab" data-bs-toggle="tab" data-bs-target="#api-body" type="button" role="tab" aria-controls="api-body" aria-selected="false">Body</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="api-headers-tab" data-bs-toggle="tab" data-bs-target="#api-headers" type="button" role="tab" aria-controls="api-headers" aria-selected="false">Headers</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="api-cookies-tab" data-bs-toggle="tab" data-bs-target="#api-cookies" type="button" role="tab" aria-controls="api-cookies" aria-selected="false">Cookies</button>
                    </li>
                </ul>
                <div class="tab-content pt-3" id="api-config-content">
                    <!-- Params -->
                    <div class="tab-pane active show" id="api-params" role="tabpanel" aria-labelledby="api-params-tab">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted small">定义查询参数（可设置数据类型）</span>
                            <button class="btn btn-sm btn-outline-secondary" id="add-param-row"><i
                                    class="fa fa-plus"></i> 添加参数</button>
                        </div>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th style="width:25%">Key</th>
                                    <th style="width:45%">Value</th>
                                    <th style="width:20%">Type</th>
                                    <th style="width:10%">操作</th>
                                </tr>
                            </thead>
                            <tbody id="params-rows"></tbody>
                        </table>
                    </div>

                    <!-- Body -->
                    <div class="tab-pane" id="api-body" role="tabpanel" aria-labelledby="api-body-tab">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Body 类型</label>
                                <select id="body-type" class="form-select">
                                    <option value="none">none</option>
                                    <option value="form-data">form-data</option>
                                    <option value="x-www-form-urlencoded">x-www-form-urlencoded</option>
                                    <option value="json">json</option>
                                    <option value="xml">xml</option>
                                    <option value="raw">raw</option>
                                    <option value="binary">binary</option>
                                </select>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Content-Type（部分类型自动设置）</label>
                                <input id="body-content-type" class="form-control" placeholder="例如 application/json">
                            </div>
                        </div>

                        <!-- JSON 编辑器 / 备用文本域 -->
                        <div id="json-editor-wrapper" class="mt-3 d-none">
                            <div class="alert alert-info py-2 px-3 mb-2 small">提供内置 JSON 编辑器（优先使用 Ace，失败则回退到文本域）。</div>
                            <div id="apitest-json-editor" style="height:240px;border:1px solid #ddd;border-radius:6px">
                            </div>
                            <textarea id="apitest-json-textarea" class="form-control d-none" rows="8"
                                placeholder="{\n  \" key\": \"value\"\n}"></textarea>
                        </div>

                        <!-- x-www-form-urlencoded / form-data 键值编辑器 -->
                        <div id="kv-body-wrapper" class="mt-3 d-none">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted small">键值编辑器（form-data 支持文件）</span>
                                <button class="btn btn-sm btn-outline-secondary" id="add-body-kv-row"><i
                                        class="fa fa-plus"></i> 添加项</button>
                            </div>
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th style="width:25%">Key</th>
                                        <th style="width:55%">Value</th>
                                        <th style="width:10%">类型</th>
                                        <th style="width:10%">操作</th>
                                    </tr>
                                </thead>
                                <tbody id="body-kv-rows"></tbody>
                            </table>
                        </div>

                        <!-- XML/RAW 文本输入 -->
                        <div id="raw-body-wrapper" class="mt-3 d-none">
                            <textarea id="raw-body-text" class="form-control" rows="8" placeholder="文本、XML等"></textarea>
                        </div>

                        <!-- Binary 文件上传 -->
                        <div id="binary-body-wrapper" class="mt-3 d-none">
                            <input id="binary-body-file" type="file" class="form-control">
                        </div>
                    </div>

                    <!-- Headers -->
                    <div class="tab-pane" id="api-headers" role="tabpanel" aria-labelledby="api-headers-tab">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted small">设置请求头（浏览器限制：无法设置 Cookie 头）</span>
                            <button class="btn btn-sm btn-outline-secondary" id="add-header-row"><i
                                    class="fa fa-plus"></i> 添加请求头</button>
                        </div>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th style="width:35%">Header</th>
                                    <th style="width:55%">Value</th>
                                    <th style="width:10%">操作</th>
                                </tr>
                            </thead>
                            <tbody id="headers-rows"></tbody>
                        </table>
                    </div>

                    <!-- Cookies -->
                    <div class="tab-pane" id="api-cookies" role="tabpanel" aria-labelledby="api-cookies-tab">
                        <div class="alert alert-warning small">说明：浏览器不允许在 XHR 中直接设置“Cookie”头。此处仅用于管理当前站点的 Cookie
                            或构建演示字符串。</div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted small">管理 Cookie（当前域）</span>
                            <button class="btn btn-sm btn-outline-secondary" id="add-cookie-row"><i
                                    class="fa fa-plus"></i> 添加Cookie</button>
                        </div>
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th style="width:35%">Name</th>
                                    <th style="width:45%">Value</th>
                                    <th style="width:10%">过期(分钟)</th>
                                    <th style="width:10%">操作</th>
                                </tr>
                            </thead>
                            <tbody id="cookies-rows"></tbody>
                        </table>
                        <div class="text-muted small">当前Cookie字符串：<code id="cookies-string"></code></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 响应展示 -->
        <div class="card shadow-sm mt-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 class="h6 mb-0"><i class="fa fa-reply me-2"></i>响应结果</h2>
                <div class="small">状态：<span id="resp-status">-</span> | 时间：<span id="resp-time">-</span>ms | 大小：<span
                        id="resp-size">-</span></div>
            </div>
            <div class="card-body">
                <ul class="nav nav-tabs" id="resp-tabs" role="tablist">
                    <li class="nav-item" role="presentation"><button class="nav-link active" data-bs-toggle="tab"
                            data-bs-target="#resp-body" type="button" role="tab">Body</button></li>
                    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab"
                            data-bs-target="#resp-headers" type="button" role="tab">Headers</button></li>
                    <li class="nav-item" role="presentation"><button class="nav-link" data-bs-toggle="tab"
                            data-bs-target="#resp-info" type="button" role="tab">Info</button></li>
                </ul>
                <div class="tab-content pt-3">
                    <div class="tab-pane active" id="resp-body" role="tabpanel">
                        <pre id="resp-body-pre" class="p-3 bg-light"
                            style="max-height:360px; overflow:auto; white-space: pre-wrap"></pre>
                    </div>
                    <div class="tab-pane" id="resp-headers" role="tabpanel">
                        <pre id="resp-headers-pre" class="p-3 bg-light" style="max-height:360px; overflow:auto"></pre>
                    </div>
                    <div class="tab-pane" id="resp-info" role="tabpanel">
                        <div id="resp-info-box" class="text-muted small"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end original apitest tab content -->